<!DOCTYPE HTML>
<html>

	<head>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>科创研究成果平台</title>
		<link href="css/main.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<link href="../bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
		<script src="../js/jquery-2.1.0.min.js" type="text/javascript"></script>
		<script src="js/jquery.SuperSlide.2.1.1.js"></script>
		<script type="text/javascript" src="../bootstrap/dist/js/bootstrap.js"></script>
		<script src="js/common.js" type="text/javascript"></script>
		<style type="text/css">
			a {
				text-decoration: none
			}
			
			boby {
				background-color: #EFEFEF
			}
			
			.activity-item-container {
				padding-bottom: 50px;
			}
			
			.content-container {
				margin: 0 auto;
				margin-top: 100px;
				width: 1240px;
				min-height: 100vh;
			}
			
			.item-catalog-container {
				margin-top: 30px;
				margin-bottom: 28px;
				width: 100%;
			}
			
			.item-catalog-container .catalog-item {
				display: inline-block;
			}
			
			.item-container .item-head {
				position: relative;
			}
			
			.item-container .item-head .card {
				padding: 24px;
				height: 300px;
			}
			
			.card {
				padding: 18px;
				background-color: #fff;
				border: .5px solid #eee;
				box-shadow: 0 0 0.5px rgba(0, 0, 0, .2);
			}
			
			.item-container .item-head-img-container {
				padding-left: 0;
				height: 100%;
			}
			
			.item-container .item-head-img {
				height: 100%;
				background-color: #1f86ed;
			}
			
			.activity-item-container .item-head-text .member-offer {
				float: left;
				margin-top: 3px;
				margin-right: 10px;
				height: 21px;
				width: 92px;
				background: url(/images/tag/member-offer.png);
			}
			
			.activity-item-container .item-head .attribute {
				margin-bottom: 0;
			}
			
			.item-container .item-head-text .attribute {
				font-size: 17px;
				line-height: 1.8;
			}
			
			.m-cover {
				background-color: #1f86ed;
				background-size: cover;
				background-position: 50%;
				background-repeat: no-repeat;
			}
			
			.activity-item-container .item-head-btn-container {
				display: -ms-flexbox;
				display: flex;
				-ms-flex-pack: justify;
				justify-content: space-between;
				width: 100%;
				height: 45px;
				margin-top: 50px;
			}
			
			.item-container .item-head-btn-func {
				padding: 7.5px 30px;
				width: 170px;
				font-size: 20px;
			}
			
			.activity-item-container .item-head-btn-container .btn-caption {
				-ms-flex-positive: 1;
				flex-grow: 1;
				-ms-flex-item-align: end;
				align-self: flex-end;
				color: #898989;
			}
			
			.container-fluid {
				padding-right: 15px;
				padding-left: 15px;
				margin-right: auto;
				margin-left: auto;
			}
			
			.row {
				margin-right: -15px;
				margin-left: -15px;
			}
			
			.item-container .item-content {
				margin-top: 20px;
				padding-left: 0;
				padding-right: 0;
				width: 100%;
			}
			
			.card {
				padding: 18px;
				background-color: #fff;
				border: .5px solid #eee;
				box-shadow: 0 0 0.5px rgba(0, 0, 0, .2);
			}
			
			.item-container .item-content .sub-title {
				margin-top: 0;
				margin-bottom: 20px;
				padding-left: 15px;
				height: 36px;
				line-height: 36px;
				font-size: 20px;
				font-weight: 700;
				color: #1f86ed;
				border-left: 10px solid #1f86ed;
			}
			
			.fr-view {
				text-indent: 0;
			}
			
			.activity-item-container .item-body .divider {
				margin-top: 20px;
				margin-bottom: 20px;
				border-bottom: 1px solid #eee;
			}
			
			.item-head-caption {
				margin-top: 30px;
				padding: 10px 25px;
				background-color: #eff6fe;
				border: 1px solid #e1e1e1;
			}
		</style>
	</head>

	<body style="background-color: #EFEFEF">
		<!--头部-->
		<header>
			<div class="beijing">
				<h2 style="font-weight:bold;font-size: 18px;">
		<a href="index.html" style="text-decoration : none"><em>
		<font color="white">科创研究成果平台</font></em></a>
		</h2>
				<ul>
					<li>
						<a class="menu_1 " style="text-decoration : none" href="index.html">首页</a>
					</li>
					<li>
						<a class="menu_1 " style="text-decoration : none" href="news.html">资讯<em></em></a>
					</li>
					<li>
						<a class="menu_1 " style="text-decoration : none" href="act.html">活动<em></em></a>
					</li>
					<li>
						<a class="menu_1 hover" style="text-decoration : none" href="tech.html">技术<em></em></a>
					</li>
					<li>
						<a class="menu_1 " style="text-decoration : none" href="cooper.html">合作<em></em></a>
					</li>
					<li>
						<a class="menu_1 " style="text-decoration : none" href="">个人中心<em></em></a>
					</li>
				</ul>
				<div class="clear"></div>
			</div>
			<div class="clear"></div>
		</header>

		<!--主体-->
		<div class="content-container item-container activity-item-container">
			<div class="item-catalog-container">
				<div class="catalog-item">
					<a href="#" style="color: #707070" class="nuxt-link-active">首页</a>
					&gt;
				</div>
				<div class="catalog-item">
					<a href="#" style="color: #707070" class="nuxt-link-active">技术</a>
					&gt;
				</div>
				<div class="catalog-item">
					<a href="javascript:void(0)" style="color: #707070">技术详情</a>
				</div>
			</div>

			<div class="item-head">
				<div class="clearfix card">
					<div class="col-xs-12 item-head-text">
						<div>
							<input type="hidden" id="actid" />
							<h3 class="title" id="tech_name">梦想小镇丨迈科技产业技术商机推介会</h3>

						</div>
						<div class="col-xs-12 item-head-caption">
							<div class="col-xs-3">
								<label>技术编号：</label><span id="tech_technicalNo">T2016060043</span>
							</div>
							<div class="col-xs-3">
								<label>成熟度：</label><span id="tech_maturity">生试</span>
							</div>
							<div class="col-xs-3">
								<label>来源地：</label><span id="tech_source">中国</span>
							</div>
							<div class="col-xs-3">
								<label>合作价格：</label>￥<span id="tech_price">100000</span>
							</div>
							<div class="col-xs-3">
							     <label>专利：</label><span id="tech_patent">无</span>
							</div>
							<div class="col-xs-3">
							     <label>交付形式：</label><span id="tech_payform">整体方案</span>
							</div>
							<div  class="col-xs-3 overflow-hidden">
							     <label>所属领域：</label><span id="tech_area">机械电子</span>
							</div>
							<div  class="col-xs-3 overflow-hidden">
							       <label>应用范围：</label><span id="tech_range">电气</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="container-fluid item-body">
				<div class="row">
					<div id="leftAlign" class="col-xs-9 item-content">
						<div class="card">
							<h4 class="sub-title">技术背景</h4>
							<div class="fr-view" id="tech_background">技术背景技术背景技术背景技术背景技术背景</div>
							<div class="divider"></div>

							<h4 class="sub-title">技术介绍</h4>
							<div class="fr-view" id="tech_introduction">技术介绍技术介绍xxxxxxxxx</div>
							<div class="divider"></div>

							<h4 class="sub-title">技术优势</h4>
							<div class="fr-view" id="tech_advantage">技术优势技术优势技术xxxxxxxx</div><br>
						</div>
					</div>
				</div>
			</div>
	</body>

</html>
<script type="text/javascript">
	function getQueryStringByName(name) {
		var result = location.search.match(new RegExp("[\?\&]" + name + "=([^\&]+)", "i"));
		if(result == null || result.length < 1) {
			return "";
		}
		return result[1];
	}

	$(document).ready(function() {
		var id = getQueryStringByName("id");
		if(id == null) {
			alert("无数据!");
			return;
		}

		$.ajax({
			type: "GET",
			dataType: "json",
			url: '/achievement/info/' + id,
			success: function(res) {
				if(res != null) {
					$("#tech_name").html(res.data.name);
					$("#tech_technicalNo").html(res.data.technicalNo);
					$("#tech_maturity").html(res.data.maturity);
					$("#tech_source").html(res.data.source);
					$("#tech_price").html(res.data.price);
					$("#tech_patent").html(res.data.patent);
					$("#tech_payform").html(res.data.payform);
					$("#tech_area").html(res.data.areaName);
					$("#tech_range").html(res.data.range);
					$("#tech_background").html(res.data.background);
					$("#tech_introduction").html(res.data.introduction);
					$("#tech_advantage").html(res.data.advantage);
				} else {
					alert("无数据!");
				}
			}
		});
	})

</script>